<!-- templates/index.html -->
{% extends "base.html" %}

{% block content %}
<div class="max-w-7xl mx-auto">
    <!-- 上传区域 -->
    <div class="bg-white rounded-xl shadow-lg p-8 mb-8 fade-in">
        <h2 class="text-2xl font-bold text-gray-900 mb-6 flex items-center">
            <i class="fas fa-cloud-upload-alt text-blue-600 mr-3"></i>
            上传PDF文件
        </h2>
        
        <div id="upload-area" class="border-2 border-dashed border-gray-300 rounded-xl p-12 text-center transition-all hover:border-blue-400 hover:bg-blue-50">
            <div class="flex flex-col items-center">
                <i class="fas fa-file-pdf text-6xl text-gray-400 mb-4"></i>
                <h3 class="text-xl font-medium text-gray-700 mb-2">拖拽PDF文件到此处</h3>
                <p class="text-gray-500 mb-6">或点击下方按钮选择文件</p>
                <button id="select-btn" class="bg-gradient-to-r from-blue-500 to-purple-600 text-white px-8 py-3 rounded-lg font-medium hover:from-blue-600 hover:to-purple-700 transform hover:scale-105 transition-all duration-200 shadow-lg">
                    <i class="fas fa-folder-open mr-2"></i>选择文件
                </button>
            </div>
        </div>
        
        <!-- 上传进度 -->
        <div id="upload-progress" class="hidden mt-6">
            <div class="flex justify-between text-sm text-gray-600 mb-2">
                <span id="upload-filename"></span>
                <span id="upload-percent">0%</span>
            </div>
            <div class="w-full bg-gray-200 rounded-full h-3">
                <div id="progress-bar" class="bg-gradient-to-r from-blue-500 to-purple-600 h-3 rounded-full upload-progress" style="width: 0%"></div>
            </div>
        </div>
        
        <input type="file" id="file-input" accept=".pdf" class="hidden" multiple>
    </div>

    <!-- PDF文件列表 -->
    <div class="bg-white rounded-xl shadow-lg p-8 fade-in">
        <h2 class="text-2xl font-bold text-gray-900 mb-6 flex items-center">
            <i class="fas fa-list text-green-600 mr-3"></i>
            我的PDF文件 ({{ pdfs|length }})
        </h2>
        
        {% if pdfs %}
        <div class="grid gap-4">
            {% for pdf in pdfs %}
            <div class="flex items-center justify-between p-6 bg-gray-50 rounded-xl hover:bg-gray-100 transition-colors fade-in">
                <div class="flex items-center space-x-4">
                    <div class="w-12 h-12 bg-red-100 rounded-lg flex items-center justify-center">
                        <i class="fas fa-file-pdf text-red-600 text-xl"></i>
                    </div>
                    <div>
                        <h3 class="font-medium text-gray-900">{{ pdf.original_filename }}</h3>
                        <p class="text-sm text-gray-500">
                            {{ pdf.file_size|format_file_size }} • 
                            {{ pdf.upload_date.strftime('%Y-%m-%d %H:%M') }}
                        </p>
                    </div>
                </div>
                
                <div class="flex space-x-2">
                    <!-- 预览按钮 (蓝色) -->
                    <a href="{{ url_for('preview_file', file_id=pdf.id) }}" target="_blank"
                       class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors hover-scale"
                       title="预览">
                        <i class="fas fa-eye"></i>
                    </a>
                    
                    <!-- 下载按钮 (绿色) -->
                    <a href="{{ url_for('download_file', file_id=pdf.id) }}"
                       class="px-4 py-2 bg-green-500 text-white rounded-lg hover:bg-green-600 transition-colors hover-scale"
                       title="下载">
                        <i class="fas fa-download"></i>
                    </a>
                    
                    <!-- 删除按钮 (红色) -->
                    <button onclick="deletePDF({{ pdf.id }}, '{{ pdf.original_filename }}')"
                            class="px-4 py-2 bg-red-500 text-white rounded-lg hover:bg-red-600 transition-colors hover-scale"
                            title="删除">
                        <i class="fas fa-trash"></i>
                    </button>
                </div>
            </div>
            {% endfor %}
        </div>
        {% else %}
        <div class="text-center py-12">
            <i class="fas fa-folder-open text-gray-400 text-6xl mb-4"></i>
            <p class="text-gray-500 text-lg">暂无PDF文件</p>
            <p class="text-gray-400">请上传您的第一个PDF文件</p>
        </div>
        {% endif %}
    </div>
</div>

<script>
const uploadArea = document.getElementById('upload-area');
const fileInput = document.getElementById('file-input');
const selectBtn = document.getElementById('select-btn');
const uploadProgress = document.getElementById('upload-progress');
const progressBar = document.getElementById('progress-bar');
const uploadFilename = document.getElementById('upload-filename');
const uploadPercent = document.getElementById('upload-percent');

// 文件选择
selectBtn.addEventListener('click', () => fileInput.click());
fileInput.addEventListener('change', handleFileSelect);

// 拖拽上传
uploadArea.addEventListener('dragover', (e) => {
    e.preventDefault();
    uploadArea.classList.add('border-blue-500', 'bg-blue-50');
});

uploadArea.addEventListener('dragleave', (e) => {
    e.preventDefault();
    uploadArea.classList.remove('border-blue-500', 'bg-blue-50');
});

uploadArea.addEventListener('drop', (e) => {
    e.preventDefault();
    uploadArea.classList.remove('border-blue-500', 'bg-blue-50');
    handleFileSelect({ target: { files: e.dataTransfer.files } });
});

function handleFileSelect(e) {
    const files = Array.from(e.target.files);
    files.forEach(file => {
        if (file.type === 'application/pdf') {
            uploadFile(file);
        } else {
            alert('只支持PDF文件！');
        }
    });
}

function uploadFile(file) {
    const formData = new FormData();
    formData.append('file', file);
    
    uploadProgress.classList.remove('hidden');
    uploadFilename.textContent = file.name;
    
    const xhr = new XMLHttpRequest();
    
    // 上传进度
    xhr.upload.addEventListener('progress', (e) => {
        if (e.lengthComputable) {
            const percent = Math.round((e.loaded / e.total) * 100);
            progressBar.style.width = percent + '%';
            uploadPercent.textContent = percent + '%';
        }
    });
    
    // 上传完成
    xhr.addEventListener('load', () => {
        if (xhr.status === 200) {
            const response = JSON.parse(xhr.responseText);
            if (response.success) {
                setTimeout(() => {
                    location.reload();
                }, 500);
            } else {
                alert('上传失败: ' + response.error);
            }
        } else {
            alert('上传失败');
        }
        
        setTimeout(() => {
            uploadProgress.classList.add('hidden');
            progressBar.style.width = '0%';
            uploadPercent.textContent = '0%';
        }, 1000);
    });
    
    xhr.open('POST', '/upload');
    xhr.send(formData);
}

function deletePDF(fileId, filename) {
    if (confirm(`确定要删除文件 "${filename}" 吗？`)) {
        fetch(`/delete/${fileId}`, {
            method: 'DELETE'
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                location.reload();
            } else {
                alert('删除失败: ' + data.error);
            }
        })
        .catch(error => {
            alert('删除失败: ' + error);
        });
    }
}
</script>
{% endblock %}